<template>

    <div class="base-operation-div">
        <el-row type="flex" justify="center">
            <el-col :span="14">
                <el-row :gutter="40">
                    <el-col class="operation-col" :span="6">
                        <!--用户信息卡片-->
                        <el-card class="user-card">
                            <!--用户头像行-->
                            <el-row class="user-logo-row" type="flex" justify="center">
                                <el-col :span="10">
                                    <el-avatar class="user-loge" :size="82" >{{getUserName.substr(0, 1)}}</el-avatar>
                                </el-col>
                            </el-row>
                            <!--用户信息行-->
                            <el-row class="user-info-row" type="flex" justify="center">
                                <el-col :span="18">
                                    <p class="user-name">{{getUserName}}</p>
                                    <div class="user-book-num">
                                        <span>发布量:100</span>
                                        <el-divider direction="vertical"></el-divider>
                                        <span>交涉量:100</span>
                                    </div>
                                    <el-button class="logout-btn" type="danger" @click="logout" icon="el-icon-upload2"
                                               round="" size="mini">登出
                                    </el-button>
                                </el-col>
                            </el-row>
                        </el-card>
                        <!--用户操作选项卡-->
                        <el-card class="operation-card">
                            <!--用户操作选项-->
                            <el-row type="flex" justify="center">
                                <el-col :span="13">
                                    <div :class="{'operation-link': true, 'last-operation-link': key === operationLinks.length - 1}" v-for="(link, key) in operationLinks" :key="key">
                                        <el-link @click="onClickLink(link.name)" :type="link.type" :icon="link.icon"
                                                 :underline="false">{{link.value}}
                                        </el-link>
                                        <!--<router-link :to="link.routePath" @click.native="onClickLink(link.name)"></router-link>-->
                                    </div>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>
                    <!--用户点击操作选项后，动态展示具体操作tab页-->
                    <el-col class="operation-detail-col" :span="18">
                        <el-card class="operation-detail-card">
                            <el-row class="operation-detail-row" type="flex" justify="center">
                                <el-col :span="20">
                                    <el-tabs v-model="activeName" @tab-click="handleClick">
                                        <el-tab-pane v-for="(tab, key) in activeTabs" :key="key" :label="tab.title" :name="tab.name">
                                            <router-view :name="tab.name"></router-view>
                                        </el-tab-pane>
                                    </el-tabs>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>

</template>

<script>
    export default {
        name: "BaseOperation",
        data() {
            return {
                userLogoUrl: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
                activeName: '',
                activeTabs: this.uploadBookTabs,
                operationLinks: [
                    {icon: 'el-icon-connection', name: 'uploadBook', value: '书籍发布管理', type: ''},
                    {icon: 'el-icon-star-off', name: 'wantedBook', value: '想要的书', type: ''},
                    {icon: 'el-icon-goods', name: 'chattedBook', value: '已交涉书籍', type: ''},
                    {icon: 'el-icon-edit', name: 'editUserInfo', value: '编辑用户信息', type: ''}
                ],
                uploadBookTabs: [
                    {name: 'uploadedBook', title: '已发布', routerPath: '/uploadedBook'},
                    {name: 'uploadBook', title: '发布书籍', routerPath: '/uploadBook'}
                ],
                wantedBookTabs: [
                    {name: 'wantedBook', title: '想要的书', routerPath: '/wantedBook'}
                ],
                chattedBookTabs: [
                    {name: 'chattedBook', title: '已交涉书籍', routerPath: '/chattedBook'}
                ],
                userInfoTabs: [
                    {name: 'editUserInfo', title: '个人资料编辑', routerPath: '/editUserInfo'},
                    {name: 'security', title: '账户与安全', routerPath:'/security'}
                ]


            }
        },
        methods: {
            //注销登陆
            logout() {
                if (sessionStorage.getItem("userInfo") !== null && sessionStorage.getItem("userInfo") !== undefined) {
                    sessionStorage.removeItem("userInfo");
                }
                //改变vuex中的登陆状态
                this.$store.commit("updateIsLogin", false);
                this.$store.commit("updateUserInfo", null);
                //请求注销服务器端session
                this.$axios.get('/logout')
                    .then(response => {
                        if (response.data.success) {
                            this.$message.info("您已登出。");
                            this.$router.push({name: 'index'});
                        } else {
                            console.log(response.data.msg);
                            this.$router.push({name: 'index'})
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    })
            },

            //点击操作链接触发事件,将点击的链接激活
            onClickLink(name) {
                //激活链接
                for (var i = 0; i < this.operationLinks.length; i++) {
                    if (this.operationLinks[i].name === name) {
                        this.operationLinks[i].type = 'primary';
                    } else {
                        this.operationLinks[i].type = '';
                    }
                }
                //动态展示相应tab页
                if (name === 'uploadBook') {
                    this.activeTabs = this.uploadBookTabs;
                }else if(name === 'wantedBook'){
                    this.activeTabs = this.wantedBookTabs;
                }else if(name === 'chattedBook'){
                    this.activeTabs = this.chattedBookTabs;
                }else if (name === 'editUserInfo') {
                    this.activeTabs = this.userInfoTabs;
                }
                //激活第一个tab页
                this.activeName = this.activeTabs[0].name;
                //并加载第一个tab页对应的组件
                this.$router.push('/myCenter' + this.activeTabs[0].routerPath);
            },

            //点击tab页触发事件
            handleClick(tab, event) {
                for(var i = 0 ; i < this.activeTabs.length ; i ++){
                    if (tab.name === this.activeTabs[i].name) {
                        this.$router.push('/myCenter' + this.activeTabs[i].routerPath);
                    }
                }
            }
        },
        computed: {
            getUserName: function () {
                if (this.$store.state.userInfo !== null) {
                    return this.$store.state.userInfo.userName;
                }
                return '';
            }
        },
        components: {},
        mounted() {
            //加载默认操作链接
            this.onClickLink('uploadBook');
            //默认加载已发布书籍组件
            //this.$router.push('/myCenter/uploadedBook');
        }
    }
</script>

<style scoped>

    .base-operation-div{
        height: 100%;
    }

    .user-card {
        /*height: 250px;*/
    }

    .user-logo-row {
        margin-top: 10px;
    }

    .user-loge{
        font-size: 40px;
    }

    .user-info-row p {
        font-size: 15px;
        height: 16px;
        line-height: 16px;
        margin: 5px 0;
        text-align: center;
    }

    .user-book-num {
        margin: 10px 0;
        text-align: center;
    }

    .user-book-num span {
        font-size: 12px;
        color: orange;
    }

    .logout-btn {
        margin: 10px 44px;
    }

    .operation-card {
        margin-top: 50px;
        /*height: 400px;*/
    }

    .operation-link {
        margin-top: 40px;
    }

    .last-operation-link{
        margin-bottom: 40px;
    }

    .operation-link a {
        text-decoration: none;
    }

    .operation-detail-card {
        /*height: 950px;*/
    }

    .operation-detail-row{
        margin-top: 20px
    }


</style>